<template>
  <div class="grow">
    <div>
      <div class="staff scrolll" @scroll="scroll">
        <div class="module-box1">
          <!-- 单聊群聊 -->
          <div class="top">
            <div :class="['top_btn', params.chat_type == 1 ? 'active' : '']" @click="filterMaterial(1)">单聊</div>
            <div :class="['top_btn', params.chat_type == 2 ? 'active' : '']" @click="filterMaterial(2)">群聊</div>
          </div>
          <el-input v-model="params.keyword" class="department" maxlength="15" placeholder="请输入名称进行查找" @input="onChangeDepartment"></el-input>
        </div>
        <el-scrollbar class="scrollbar">
          <div class="news" v-for="item in employeeList" :key="item.id" @click="chatDetail(item)" :class="selectId == item.id ? 'hover-detail-color' : ''">
            <el-avatar class="el_avatar" shape="square" :size="38" :src="item.avatar" />
            <div class="right">
              <div class="title">
                <div v-if="params.chat_type == 1">{{ `${item.name}(${item.is_belong_user ? '归属员工' : '协助员工'})` }}</div>
                <div v-if="params.chat_type == 2">{{ item.name }}</div>
                <div v-if="item.msgtime">{{ item.msgtime }}</div>
                <div v-else class="danger">从未沟通</div>
              </div>
              <div class="footer"> {{ item.msgtype_name }} </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div>
      <!-- 聊天记录模块 -->
      <ChartRecord
        ref="chatRecord"
        @updatagroupMember="updatagroupMember"
        @updataSingledata="updataSingledata"
        :ltType="materialId"
        :bembersData="bembersData"
        :singleData="singleData"
        :msgid="msgid"
        :roomid="roomid"
        :groupData="groupData"
        :staff_id="staff_id"
        :cust_id="cust_id"
      ></ChartRecord>
      <!-- end聊天记录模块 -->
      <!-- 客户弹窗 -->
      <CustomerPopup ref="customerRef" :singleData="singleData" :ltType="materialId" @updateSelectRow="updateSelectRow" :customer="customer" @updateContactList="updateContactList"></CustomerPopup>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { businessDetailChat } from '@/api/salesleads/salesmanagement/business'
  import { reactive, ref, toRefs, onBeforeMount, onMounted, watch } from 'vue'
  import { store } from '@/store'
  import Search from './Search.vue'
  import ChartRecord from './ChatRecord.vue'
  import CustomerPopup from './CustomerPopup.vue'
  import { getSetionId } from '@/utils/utils'
  import { getChatList, getContactList, getChatDetails, getContact, getGroupChatDetails, getGroupMembers } from '@/api/employe/riskmonitoring/messagearchiving'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  interface Props {
    businessID: any
  }
  let suffix = null
  let input__inner = null
  let img = document.createElement('img')
  let imgUrl: string = ''
  let employeename: string = ''
  let customer: any = ref([])
  let searchData: any = ref([])
  let bembersData: any = ref([])
  let selectRow: any = ref({})
  let customerList: any = ref([])
  const employeeList: any = ref([])
  const singleData = ref([])
  const groupData = ref([])
  const ygId = ref()
  const value = ref()
  const department = ref('')
  const materialId = ref(0) // 聊天选择
  const selectId = ref(0)
  const customerRef = ref(null) // 客户弹框
  const chatRecord = ref(null)
  //打开新建选择人
  const creators: any = ref([])
  // 商机
  const params = reactive<any>({
    business_id: '', //商机ID
    chat_type: 1, //聊天类型 1私聊 2群聊
    keywords: '', //搜索关键字
    page: 1, //分页页码，数字类型
    page_size: 100 //分页大小
  })
  // 获取客户列表参数
  let customerData = reactive({
    mobile: '',
    name: '',
    work_user_ids: [],
    page: 1, //分页页码
    page_size: 10 //每页显示数
  })

  // 客户列表
  const fnGetContactList = () => {
    getContactList(customerData)
      .then((res: any) => {
        store.dispatch('pageTotal', res.total)
        customer.value = res.data
      })
      .catch((v) => {
        console.log(v)
      })
  }
  // 下一页重新获取数据
  const updateContactList = (v: any) => {
    customerData = v
    fnGetContactList()
  }
  let cust_id = ref('')
  const updateSelectRow = (v, item) => {
    selectRow.value = v.value
    customerList.value = item
    singleData.value = []
    cust_id.value = v.value.id
    console.log(v.value.id, item)
  }

  const onChangeDepartment = () => {
    businessDetailChat(params).then((res: any) => {
      employeeList.value = res
      console.log(res)
    })
    if (selectRow.value.id || creators.value[0]?.id) {
      getChatList(params).then((res: any) => {
        employeeList.value = res
      })
    }
  }

  // 获取部门成员
  let staff_id = ref('')
  // 聊天筛选
  const filterMaterial = (v: any) => {
    params.chat_type = v
    businessDetailChat(params).then((res: any) => {
      employeeList.value = res
      console.log(res)
    })
  }
  let msgid = ref('')
  let roomid = ref('')
  // 单聊聊天详情 后续需要优化代码
  const chatDetail = (item: any) => {
    selectId.value = item.id

    console.log(item, '1111111111')

    // 员工
    if (materialId.value == 0) {
      let singleParams = {
        msgid: item.msgid,
        staff_id: staff_id.value,
        msgtype: '',
        keywords: '',
        msgtime: [],
        page: 1,
        page_size: 10
      }
      msgid.value = item.msgid
      chatRecord.value.start = true
      // 单聊
      if (!item.msgid) return
      getChatDetails(singleParams).then(({ data }: any) => {
        singleData.value = data.filter((item: any) => {
          return item.msgtype == 1 || 2 || 5 || 6 || 10 || 11 || 12 || 19
        })
        console.log('222222222222222222222222222222', singleData.value)
      })
    } else {
      chatRecord.value.start = true
      roomid.value = item.roomid
      let groupParams = {
        roomid: item.roomid,
        staff_id: staff_id.value,
        msgtype: '',
        keywords: '',
        msgtime: [],
        page: 1,
        page_size: ''
      }
      console.log(staff_id)
      if (!item.msgid) return
      getGroupChatDetails(groupParams).then(({ data }: any) => {
        singleData.value = data
      })
      let groupMemberParams = {
        roomid: item.roomid,
        keywords: '',
        page: 1,
        page_size: 10
      }
      getGroupMembers(groupMemberParams).then((data: any) => {
        groupData.value = data
        // console.log(data)
      })
    }
    // 客户
    if (materialId.value == 0) {
      msgid.value = item.msgid
      let singleParams = {
        msgid: item.msgid,
        cust_id: cust_id.value,
        msgtype: '',
        keywords: '',
        msgtime: [],
        page: 1,
        page_size: 10
      }
      // 单聊
      getChatDetails(singleParams).then(({ data }: any) => {
        // debugger
        singleData.value = data.filter((item: any) => {
          return item.msgtype == 1 || 2 || 5 || 6 || 10 || 11 || 12 || 19
        })
        console.log('222222222222222222222222222222', singleData.value)
      })
    } else {
      roomid.value = item.roomid
      let groupParams = {
        roomid: item.roomid,
        cust_id: cust_id.value,
        msgtype: '',
        keywords: '',
        msgtime: [],
        page: 1,
        page_size: ''
      }
      console.log(cust_id)
      getGroupChatDetails(groupParams).then(({ data }: any) => {
        singleData.value = data
        // console.log(data)
      })
      let groupMemberParams = {
        roomid: item.roomid,
        keywords: '',
        page: 1,
        page_size: 10
      }
      getGroupMembers(groupMemberParams).then((data: any) => {
        groupData.value = data
        // console.log(data)
      })
    }

    singleData.value = []
    chatRecord.value.paged = 1
    chatRecord.value.pageg = 1
  }
  // 单聊员工聊天详情
  const updataSingledata = (v: any) => {
    console.log('sslt', v)
    singleData.value = v
  }
  const updatagroupMember = (v: any) => {
    groupData.value = v
  }
  let start = ref(true)
  const paged = ref(1)
  const pageg = ref(1)
  const scroll = async () => {
    const el = document.querySelector('.scrolll')
    const clientHeight = el?.clientHeight
    const scrollHeight = el?.scrollHeight
    const scrollTop = Math.ceil(el?.scrollTop)
    console.log(scrollHeight, clientHeight)
    console.log(scrollTop)
    console.dir(el)
    if (scrollTop >= scrollHeight - clientHeight) {
      if (!start.value) return
      // if (index.index == 0) {
      //   console.log('2222200000000000000')
      //   let params = {
      //     staff_id: staff_id.value,
      //     chat_type: materialId.value == 0 ? 1 : 2, //聊天类型  1-单聊  2-群聊
      //     keywords: '', //聊天对象名称(员工名称/群聊名称/客户名称)
      //     page: ++paged.value, //分页页码
      //     page_size: 10 //每页显示数
      //   }
      //   const { data } = await getChatList(params)
      //   console.log('data', data)
      //   if (data.length === 0) {
      //     start.value = false
      //     return console.log('没有数据了')
      //   }
      //   employeeList.value.push(...data)
      // } else {
      //   let paramss = {
      //     cust_id: cust_id.value,
      //     chat_type: materialId.value == 0 ? 1 : 2, //聊天类型  1-单聊  2-群聊
      //     keywords: department.value, //聊天对象名称(员工名称/群聊名称/客户名称)
      //     page: ++pageg.value, //分页页码
      //     page_size: 10 //每页显示数
      //   }
      //   const { data } = await getContact(paramss)
      //   console.log('data', data)
      //   if (data.length === 0) {
      //     start.value = false
      //     return console.log('没有数据了')
      //   }
      //   customerList.value.push(...data)
      // }
      start.value = true
    }
  }
  const onBeforeInit = (id: any) => {
    params.business_id = id
    businessDetailChat(params).then((res: any) => {
      console.log(res)
      employeeList.value = res
      console.log(res)
    })
  }
  defineExpose({
    msgid,
    onBeforeInit
  })
</script>

<style lang="scss" scoped>
  .scrollbar {
    padding: 0 16px;
  }
  .news {
    height: 36px;
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #eaeaea;

    .right {
      margin-left: 6px;
      flex: 1;
      font-size: 10px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      line-height: 14px;

      .title {
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        margin-bottom: 5px;
        .danger {
          color: #f91313;
        }
      }
      .footer {
        font-size: 12px;
        color: #969696;
      }
    }
  }
  .selectAvataryg {
    width: 217px;
  }
  .selectAvatar {
    width: 217px;
  }
  .el-input--suffix .el-input__inner {
    // width: 217px;
    padding-left: 10px;
  }
  :deep .el-input__icon {
    width: 12px;
  }
  :deep .el-select__popper.el-popper[role='tooltip'] {
    display: none;
  }

  :deep .avatar {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    left: 7px;
  }
  .grow {
    display: flex;
  }
  .staff {
    // width: 270px;
    width: 330px;
    // min-width: 270px;
    min-height: 800px;
    border: 1px solid #d6d2d2;
    padding: 16px 0;
    position: relative;
    margin-right: 16px;
    box-sizing: border-box;

    .module-box1 {
      padding: 0 16px;
      .el-select {
        width: 100%;
      }
      .top {
        display: flex;
        width: 100%;

        &_btn {
          flex: 1;
          padding: 5px 0;
          background: #ffffff;
          border: 1px solid #ff6b00;
          font-size: 12px;
          color: #ff6b00;
          line-height: 16px;
          cursor: pointer;
          margin-top: 10px;
          text-align: center;
        }
        .active {
          background: #ff6b00;
          color: #ffff;
        }
      }
      .department {
        margin-top: 10px;
      }
    }

    .chat {
      margin-top: 16px;
      .onbu {
        display: flex;
        padding: 16px 16px 0;
        cursor: pointer;
        margin-bottom: 1px;

        :deep .el-image {
          flex: 0 0 36px;
          width: 36px;
          height: 36px;
          vertical-align: middle;

          .el-image__inner {
            border-radius: 4px;
          }
        }

        .cell-box {
          width: 100%;
          margin-left: 10px;
          padding-bottom: 16px;
          border-bottom: 1px solid #eaeaea;

          .cell-cont1 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
              width: 60px; /*不允许出现半汉字截断*/
              font-size: 14px;
              color: #33302d;
            }
            .time {
              font-size: 12px;
              color: #969696;
            }
          }
          .cell-cont2 {
            width: 180px; /*不允许出现半汉字截断*/
            margin-top: 10px;
            font-size: 12px;
            color: #969696;
          }
        }
      }
      .spot {
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis; /*文字隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
    }
    .hover-detail-color {
      background-color: #fffaf9;
    }
  }
  .scrolll {
    height: 600px;
    overflow: scroll;
    // overflow-x: hidden;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }
</style>
